<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
   <div id="app"> 
    <!-- style 属性 的渲染方式有哪些 -->
     <!-- 1 固定属性 属性值为数据 {属性：数据} -->
     <div :style="{color:kcolor,fontSize:ksize}">
         今天星期二 ，马上放假了
     </div>
     <!-- 整个style渲染 -->
      <div :style="cstyle">
         蔡徐坤
      </div>
    <!-- 多个style渲染 -->
      <div :style="[cstyle,wstyle]">
         吴亦凡
      </div>    
   </div>
   <script src="./vue.js"> </script>
   <script>
        let vm=new Vue({
          el:"#app",//声明vue的实例管理范围
          data(){ //vue组件用到的所有数据
            return {
              kcolor:"red",
              ksize:"30px",
              cstyle:{
                color:"blue",
                fontSize:"40px",
                background:"pink"
              },
              wstyle:{
                height:"200px",
                Transform:"skew(-45deg)"
              }
            }
          },
          methods:{ //vue组件用到的所有方法

          }
        })
   </script>
</body>
</html>